<template>
    <div class="main">
        <ul class="b-list">
            <li>
                <div class="b-panel">
                    <h3 class="b-title">今日预约量分布</h3>
                </div>
            </li>
            <li>
                <div class="b-panel">
                    <h3 class="b-title">经营指标</h3>
                </div>
            </li>
            <li>
                <div class="b-panel">
                    <h3 class="b-title">预约量分析</h3>
                </div>
            </li>
            <li>
                <div class="b-panel">
                    <h3 class="b-title">预约记录</h3>
                </div>
            </li>
        </ul>
    </div>
</template>
<script setup></script>
<style lang="less" scoped>
.main {
    display: flex;
    flex-direction: column;
    width: 100%;
    height: 100%;
    position: relative;
    top: 0;
    left: 0;
    background-color: #f0f2f5;
    .b-list {
        box-sizing: border-box;
        margin: 0;
        padding: 0;
        padding-right: 20px;
        padding-top: 20px;
        font-size: 0;
        display: flex;
        flex-wrap: wrap;
        width: 100%;
        height: 100%;
        background-color: #f0f2f5;
        position: fixed;
        left: 0;
        top: 0;
        li {
            list-style: none;
            flex: 1;
            width: 50%;
            min-width: 50%;
            max-width: 50%;
            font-size: 14px;
            position: relative;
            .b-panel {
                position: absolute;
                top: 0;
                left: 20px;
                right: 0;
                bottom: 20px;
                background-color: white;
                border-radius: 6px;
                -webkit-box-shadow: 0 0 5px rgba(0, 0, 0, 0.1);
                box-shadow: 0 0 5px rgba(0, 0, 0, 0.1);
                padding: 20px;
            }
        }
    }
}
</style>
